<template>
    <div style="margin: 5px 0px;">
        <div class="operating-item item">
            <el-tooltip class="item" effect="light" :disabled="!disableChoseDb" :content="$t('aside.clusterDisableChoseDb')" placement="top">
                <el-select size="small" :disabled="disableChoseDb" v-model="currentChoseDbNo" @change="updateChoseDb" :placeholder="$t('aside.pleaseChoose')">
                    <el-option v-for="(db,dbindex) in dbSize" :key="dbindex" :label="'DB'+(db-1)" :value="(db-1)"></el-option>
                </el-select>
            </el-tooltip>
            <el-button size="small" type="primary" icon="el-icon-plus" @click="addKeyDialogVisible=true">{{$t('aside.AddKey')}}</el-button>
         </div>
         <div class="item">
            <el-input size="small" @keyup.enter.native="search" :placeholder="$t('aside.PleaseEnter')" v-model="searchTxt">
                <el-button @click="search" slot="append" icon="el-icon-search"></el-button>
            </el-input>
         </div>
        <addKeyDialog :addKeyDialogVisible="addKeyDialogVisible" :config="config" :client="this.redisClient" @hideDialog="addKeyDialogVisible=false"></addKeyDialog>
    </div>
</template>

<script>
import addKeyDialog from '@/components/dialog/addKeyDialog'
export default {
    components:{
        addKeyDialog
    },
    props:["redisClient","config"],
    data() {
        return {
            addKeyDialogVisible:false,
            searchTxt:"",
            dbSize:0,
            currentChoseDbNo:0,
            disableChoseDb:true
        }
    },
    methods:{
        //初始化
        init(){
            this.disableChoseDb=this.redisClient.constructor.name==='Cluster'
            const self=this;
            this.redisClient.config('get', 'databases').then((res) => {
                self.dbSize=parseInt(res[1])
            }).catch((e) => {
               //可能服务器禁用了config命令利用其它记载方式
               this.loadInfo(self)
            });
        },
        //加载redis信息
        loadInfo(self){
            this.redisClient.info().then((res)=>{
                let lastDb=parseInt(res.trim().split('\n').pop().match(/db(\d+)/)[1]);
                if(lastDb>16){
                    self.dbSize=lastDb;
                }else{
                    self.dbSize=16;
                }
            }).catch((e)=>{
                self.dbSize=16;
            })
        },
        //搜索事件
        search(){
            this.$parent.$parent.$parent.$refs.menuKeyList.search(this.searchTxt)
        },
        //切换db
        updateChoseDb(){
            this.redisClient.select(this.currentChoseDbNo).then(()=>{
                this.$parent.$parent.$parent.$refs.menuKeyList.search('*')
            }).catch((error)=>{
                this.$message.error({
                    message:error.message
                })
            })
        }
    },
    watch: {
        redisClient(newValue, oldValue) {
           if(newValue&&oldValue===null){
               this.init();
           }
        }
    } 
}
</script>

<style scoped>
    button{
        width: 100%;
    }
    .operating-item > .el-select,.operating-item > .el-button{
        display: inline-block;
        width: 49%;
        vertical-align: middle;
    }
    .item{
        margin: 5px 0px;
    }
</style>